import React, { useState, useCallback } from 'react';
import Radium from 'radium';
import color from 'color';

class Button_ extends React.Component {
  // static propTypes = {
  //   kind: PropTypes.oneOf(['primary', 'warning']).isRequired
  // };

  render() {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (
      <button style={{ ...styles.base, ...styles[this.props.kind] }}>
        {this.props.children}
      </button>
    );
  }
}

// 问题1：Button 上面无法设置 onEvent 事件处理函数，因为在DOM元素上包了一层。
// 问题2：只能 patch class-based 组件，没有 FC 支持
const Button = Radium(Button_);

export default function TryRadium() {
  const [kind, setKind] = useState('primary');
  const onClick = useCallback(() => {
    console.log('click');
    setKind(v => (v === 'primary' ? 'warning' : 'primary'));
  }, []);
  return (
    <div>
      <h1>Page radium</h1>
      <div onClick={onClick}>{kind}</div>
      <Button kind={kind}>Radium Button</Button>
    </div>
  );
}

const styles = {
  base: {
    color: '#fff',

    // Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or @media) with the additional rules.
    ':hover': {
      background: color('#0074d9')
        .lighten(0.2)
        .string(),
    },
  },

  primary: {
    background: '#0074D9',
  },

  warning: {
    background: '#FF4136',
  },
};
